如果说到今年刷屏的案例，8月GQ实验室给资生堂做的《红了！》绝对算是一个。为了形容美，内容用到150种方式，并以此记录生活中那些细碎的、宏大的、温柔的、热烈的美。
除了这是一个出色的文案游戏，新鲜感被不断提及。那是一个和其他公众号截然不同的内容尝试。同时，不断有人问到它究竟是怎么做出来的。为此我们决定做这样一篇文章，从理论和实践角度，帮品牌、创意公司、social公司、公众号从业者、公众号技术开发者等等解答一些最基础的问题。同时，为了更专业，更有信服力，我们找到了《红了！》的交互技术提供方，也是SVG交互领域的头部公司——符号互动（更为人所知的名字是他们的公众号名「交互实验室」）一同加入。对于如何实现如此炫酷的公众号推文，所有人的第一反应都是用了“科技”。这一点的确没错，这种眼花缭乱的效果背后就是靠SVG（Scalable Vector Graphics）技术来实现的
尽管整体推文呈现出可动的状态，但长按每一个部分其实我们可以明确感受到，公众号中是没有GIF的格式图片的简单来说就是用户可以直接用代码来描绘图像，可以用任何文字处理工具打开SVG图像，通过改变部分代码来使图像具有交互功能，并可以随时插入到HTML中通过浏览器来观看。也就是说，我们看到前端炫酷的特效动画和交互细节都是靠程序员一个个代码敲出来的。而这种爆款推文的本质其实是代码和创意碰撞下的结晶。从常识角度出发，我们一般认为技术是为创意服务的。所以一篇推文的推进流程应该是根据想要表达的主题脑暴出一个天马行空的创意，再将创意交由技术人员去思考，如何通过代码将这些优秀的创意表现出来，是一个：
但事实上，这类高质量推文的产出并非一个线性的过程，技术与创意的关系并不是谁为谁服务，谁是谁的下一环节，而是一个相辅相成的关系。用一句话来概括就是：创意天马行空，超过了技术的承载能力时，再优秀的创意也只是泡影；在有技术托底的情况下，创意才是真正能决定一篇文章价值的关键。交互实验室（符号互动）表示：
很多想做这种推文的甲方都是一些创意、内容公司，因此在提创意需求时会仅围绕创意和表达展开，但受困于微信公众号的技术力问题，很多创意往往无法实现。这也就要求创意工作者在进行创意策划时要做到既满足主题方向，又要让创意本身的实现难度不高于技术上限。因此内容的推进流程变成了：
在这套推进流程中，技术不再单纯是实现创意的工具，而是一个贯穿始终，需要与主题适配，需要制约创意延展，同时还要去实现创意与主题结合的一个纵览全篇的关键角色。既然技术如此重要，那么一个新的问题摆在我们面前：谁来决定技术力的高与低？是内容创意？还是技术团队的能力？又或者是题材主题本身？
任何一项技术都有其上限，基于微信公众号生态的SVG技术的上限则来源于公众号平台本身。举一个非常简单的例子，微信上有一种在输入框内输入指定字符再根据输入内容生成海报，鼓励用户在朋友圈晒出海来进行裂变的玩法，这种玩法集趣味度与传播度为一身，经常出现朋友圈刷屏的现象，就比如每年年底的支付宝晒年度账单和网易云晒年度歌单。而也有不少品牌想要效仿这一玩法，利用自己微信公众号的资源与能力，自动抓取用户昵称填入、用户输入内容的版式自适应、定制字体等，再根据用户的不断点击最终生成一张特定海报，再通过用户长按保存、一键分享到朋友圈达到传播效果。但实际上以目前的技术能力来讲，这一点几乎是无法达到的。符号互动向广告门接着表示：
SVG技术是一种技术潜力很大的能力，但即使能力再强势，也要遵循微信平台生态的基本原则，后台没有用户数据存储功能，也就无法实现客户想象的自定义输入并根据内容输出的功能。与之相似的例子还有一个，就是微信公众号无法调取接口，比如手机的重力感应功能和麦克风，都是无法在公众号中体验到的，这些功能更多是放到APP和小程序中的，想要在公众号中建一个APP这一点是当前技术无法驱动的。这也就是说，决定技术天花板的并不只在技术团队本身，还在于微信平台，平台的功能会限制技术力的发挥。前面我们说了很多次技术在高质量推文中起到的关键作用，也提到了技术的天花板决定了推文表现形式的天花板，技术力越高越好吗？这个说法其实对也不全对，对于负责技术的团队而言技术能力是越高越好的，越高的技术能力意味着创意可以发挥得更加自由，同时在相同创意下表达更加流畅；但对于内容本身而言，如何适配主题才是决定如何选用技术的基础原则。我们能明显感受到，GIF和SVG的流畅度是不同的，且GIF格式下图片只会不断循环往复，而SVG则更加智能，可以根据用户的操作来进行反馈，但是一个可互动与不可互动就有着本质上的区别，更何况SVG技术呈现的效果体验更加。
那如果从主题适配角度来看，SVG交互是要方便用户去理解和阅读的，但过于复杂的技术也常常带来用户阅读的障碍，这也是多数初次尝试SVG技术的新手常犯的一个错误。品牌传播，尤其是在今天的信息高度集中的大环境下，讲求快准狠，太过复杂的技术，让用户左点一下，右划一下往往在传播过程中就会发生很多的信息丢失。仔细看此前爆火的《红了！》中，就是通过自动展开的方式，优化了作者与读者之间的交互效果。再看头部汽车品牌宝马的《宝马中国》的公众号，同样几乎大部分推文都用了自动展开技术，配合一些左右滑动和可动视觉元素就能很好地展现宝马品牌那种既时尚又有范，可以说是高级感拉满。
而同样是国际奢侈品巨头的《路易威登》公众号同样善用SVG技术，但与宝马的定位人群不同，我们能明显从LV的公众号中找到更多可交互的元素。但究竟宝马和LV谁的SVG技术更好其实并没有可比性，更多的是主题的适配。
讲了这么多，问一个基础的问题：微信公众号推文支持3D效果吗？答案是不支持，但很多人要反驳：“那我在XXXX公众号上见到了3D效果，你凭什么说不支持呢？”事实上，这些读者所看到的3D效果是一种是一种全新的SVG交互技术，，比如通过多层嵌套来实现这种效果，这种解决方案虽然技术难度比较高，但是是微信公众号本身所支持的技术，而3D效果本身公众号是不支持的，打开公众号后台，根本找不到3D效果这个选项。可以说微信的公众号为创作者提供了一个平台、一个开发环境，就像我们的安卓苹果手机一样，手机并不支持各种游戏对战，因为手机并没有这些功能，但手机支持开发者通过代码去实现这些功能，甚至是通过这些功能创造一些颠覆平台本身的能力。手机即使功能再强，也没有人能靠靠手机APP在天上飞，这就是平台本身对内容的限制。既然我们明白SVG为感官体验带来的冲击，那么如何来定制自己的SVG内容呢？成本对于甲方来讲究竟几何？怎样判断SVG产出的内容是否优质呢？首先关于内容方面，可以从两个维度来看，首先是从甲方与读者角度来看，这是最基本的一个检验内容好坏的标准，也是一个万年不变的思路。当展现效果能表达甲方品牌想表达的内容，读者能接受并理解推文中的理念，甚至引起共鸣，这是一篇高质量内容的必备要素。但除了结果导向的这种判断方法之外，我们更应该注重技术的下限。前面我们反复提及团队的技术能力越逼近上限越有优势，这意味着团队可实现的技术更加包容，能够有更多方式表达内容，但多数情况下内容不需要表达得如此复杂，甚至已经到了用户点进一篇公众号推文的阅读难度堪比高考，这是一种舍近求远的做法。
而团队的下限则保证了在进行常规表达时，能更好地呈现出一些基础的效果，大道至简，这是目前多数高端品牌公众号都在推崇的一种交互理念，这也是为什么这几年我们看到需要用户反复点击延展的推文越来越少了，这种自动展开的文章成为了新的主流。
再举一个简单的例子，微信后台的图片上传是有限制的，最高10M，但对于一些超长图来说，无论怎样压缩都是超过10M的。这时不同的团队就会有不同的解决方案，最简单省事的一点就是将图片裁剪成无数张更小的图片，然后运用SVG技术无缝拼接到一起。但当文件素材过多时，加载成了一个很大的问题，很多读者读到一半会发现后面的内容全部都在加载中，这对阅读的打击是非常大的。尤其是当代年轻人的地铁阅读习惯，本身这种场景就是一个网络环境偏差的场景，很多人面对永远在加载中的图片很有可能就会点开下一篇推文，而团队辛苦做的内容就成为一种流失。那么高下限的技术团队则会运用SVG技术不再是简单的无缝拼接，而是真正在细节上做到流畅优化，为读者带来更好的阅读体验。因此，选择技术团队的时候，通俗地来讲无非注意两点：有没有达到预期的表达效果？细节上是否优化到位？甚至有的团队在细节上会更愿意与品牌方进行一种类似共创的合作模式，在这种模式下，品牌方能够更清楚怎样通过技术传达自己的理念，技术团队也能在这种类共创的模式下更深刻的为品牌选择与之匹配的内容与表达。
其实，SVG技术已经成为微信公众号行业趋势，现在有一些视频内容都要三秒决胜负了，往往能决定公众号胜负的，需要对细节有着极致的把控。而这种苛刻则来源于品牌与技术、创意与技术之间交汇的那一个关键点。• END •
点击 get 「2022 TA合辑」 ↓↓↓